import React, { Component } from 'react';
import { StyleSheet, WebView, View, Platform, TouchableOpacity, Text } from 'react-native';
import theme from '../native-base-theme/variables';
import { UtilToast, getCurrentPosition } from '../utils/util-method';

class MyWebView extends Component {
  static navigationOptions = {
    title: '报表',
    headerStyle: { backgroundColor: theme.toolbarDefaultBg },
    headerTintColor: '#FFFFFF',
    headerTitleStyle: {
      fontWeight: 'bold',
      fontSize: 20,
      flex: 1,
      textAlign: 'center',
    },
    headerRight: <View />,
  }

  _cancelKeywordModal = async () => {
    const { location } = await getCurrentPosition();
    if (location && location.coords && location.coords.latitude) {
      this.webview.postMessage(JSON.stringify({ lng: location.coords.longitude, lat: location.coords.latitude }));
    } else {
      UtilToast('没有获取到位置信息', 'danger');
    }
  }

  _refresh = () => {
    this.webview.reload();
  }

  webview;

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={this._cancelKeywordModal}
          style={styles.arrow}
        >
          <Text>btn</Text>
        </TouchableOpacity>
        <WebView
          ref={(ref) => {
            this.webview = ref;
          }}
          // source={{ uri: 'https://www.baidu.com' }}
          source={require('../../assets/map/index.html')}
          // source={
          //   Platform.OS === 'ios' ? require('../../assets/map/index.html') : { uri: 'file:///android_asset/index.html' }
          // }
          style={{ width: '100%', height: '100%' }}
          javaScriptEnabled
          geolocationEnabled
          startInLoadingState
          renderError={() => (
            <View
              style={{
                width: '100%',
                height: '100%',
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <TouchableOpacity
                onPress={this._refresh}
                style={styles.arrow}
              >
                <Text>加载失败，点击刷新</Text>
              </TouchableOpacity>
            </View>
          )}
          androiddomStorageEnabled={false}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default MyWebView;
